<template>
  <div class="boxList">
    <!-- 库位列表结构 -->
    <div class="List" v-if="isShow">
      <!-- 图片区域 -->
      <div class="myimg" v-if="myimage != ''">
        <img
        id="myone"
        :src="'data:image/png;base64,' + myimage"
        :style="{
          width: width * 0.6 * num + 'px',
          height: height * 0.6 * num + 'px',
          marginLeft: loctionleft + 'px',
          marginTop: loctiontop + 'px',
        }"
      />
          <!-- 车辆的实时位置 -->
        <div class="mybycar">
          <!-- <span
            class="Gray"
            :style="{
              width: 15 * num * 0.6+'px',
              height: 15 * num*0.6 + 'px',
              top: (height - (inif.y / 10.0) / 5  - 16) * 0.6 * num + loctiontop + 'px',
              left: ((inif.x / 10.0) / 5 - 4) * 0.6 * num + loctionleft + 'px',
              transform: 'rotate(' + inif.fused_angle * 180 / Math.PI+90+ 'deg)',
            }"
          >
          </span> -->
          <img
            id="bycar"
            src="../../../assets/车辆2.png"
            alt=""
            :style="{
              width: 15 * num* 0.6 + 'px',
              height: 30 * num* 0.6 + 'px',
              top: (height - (inif.y / 10.0) / 5 ) * 0.6 * num  -(30* 0.6 * num/2)+ loctiontop + 'px',
              left: ((inif.x / 10.0) / 5) * 0.6 * num-(15* 0.6 * num/2) + loctionleft + 'px',
              transform: 'rotate(' + -(inif.fused_angle * 180 / Math.PI +90) + 'deg)',
            }"
          />
        </div>
          <!-- ------------------------------------------------------------小圆点之间的边框
          
                        width: (item.weizhi.width + 25) * num* 0.6 + 'px',
              height: (item.weizhi.height - 12) * num* 0.6 + 'px',
              top: item.weizhi.y * num* 0.6 -(28* 0.6 * num/2) + loctiontop + 'px',
              left: (item.weizhi.x) * num* 0.6 -(30* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.weizhi.age + 'deg)',
                transformOrigin: 9 * num + 'px '+9 * num + 'px',
                lineHeight: (item.weizhi.height - 13) * 0.6 * num + 'px',
                fontSize: 20 * 0.6 * num + 'px',
          -->
          <template>
            <span
              v-for="item in complete"
              :key="item.id * 0.01"
              id="myspan"
              style="pointer-events: none;text-align: center;"
              :style="{
                width: (item.weizhi.width + item.weizhi.height-2) * num* 0.6 + 'px',
                height: (item.weizhi.height) * num* 0.6 + 'px',
                top: item.weizhi.y * num* 0.6 -((item.weizhi.height+3)* 0.6 * num/2) + loctiontop + 'px',
                left: (item.weizhi.x) * num* 0.6 -((item.weizhi.height+3)* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.weizhi.age + 'deg)',
                transformOrigin:  (item.weizhi.height+3)/2 * num* 0.6 + 'px '+ (item.weizhi.height+3)/2 * num* 0.6  + 'px',
                lineHeight: (item.weizhi.height) * 0.6 * num + 'px',
                fontSize: 20 * 0.6 * num + 'px',



              }"
            ><span class="myspanID"
            :style="{
                transform: 'rotate(' + -item.weizhi.age + 'deg)',
                lineHeight: (item.weizhi.height) * 0.6 * num + 'px',
                fontSize: 20 * 0.6 * num + 'px',
              }"
            >{{item.id}}</span></span>
          </template>

          <!-- -----------------------当没有点击任何一项时显示全部点位数据 ((list.y - 168) * num) / 10  ------------------------- -->
          <template v-for="(item, index) in robot">
            <!--充电点图片 -->
            <img
              v-if="item.type == 3 && item.valuable_bits == 1"
              @click="select(item)" 
              :key="index * 0.15"
              id="bycar"
              src="../../../assets/maiwei.zip.png"
              alt=""
              :style="{
                width: 20 * num * 0.6 + 'px',
                height: 20 * num * 0.6 + 'px',
                top: (height-(item.y / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: ((item.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.angle  * 180 / Math.PI+ 'deg)',
              }"
            />
            <img
              v-if="item.type == 3 && item.valuable_bits == 0"
              @click="select(item)" 
              :key="index * 0.15"
              id="bycar"
              src="../../../assets/飞书20220913-115140.png"
              alt=""
              :style="{
                width: 20 * num * 0.6 + 'px',
                height: 20 * num * 0.6 + 'px',
                top: (height-(item.y / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: ((item.x / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.angle  * 180 / Math.PI+ 'deg)',
              }"
            />
            <!-- 显示全部库位点区域   :class="activeItem === list ? 'active' : '' "  -->
            <span
              v-if="item.type != 3"
              @click="select(item)" 
              :key="item.id"
              id="span"
              
              :style="{
                backgroundColor: item.type == 0 ? '#9e9e9e':item.type == 1 ? '#feed9d':item.type == 2 ? '#ff9800':'',
                lineHeight: 20 * 0.6 * num+ 'px',
                fontSize: 16 * 0.6 * num + 'px',
                width: 20*0.6 * num + 'px',
                height: 20*0.6 * num + 'px',
                top: (height-(item.y / 10.0) / 5) * 0.6 * num -(20* 0.6 * num/2)+ loctiontop + 'px',
                left: (((item.x / 10.0) / 5)) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.angle  * 180 / Math.PI+ 'deg)',
              }"
              > <span style="position: absolute;top: 0px;left: 0px;" 
                      :style="{
                        // transform: 'rotate(' + -item.angle * 180 / Math.PI + 'deg)',
                      }"
              >{{ item.id }}</span>
               </span
            >
          </template>

          <!-- -------------------------------------------------------------显示路线编辑点位 -->
          <!-- <template v-if="list == ''">
            <span
              v-for="item in complete"
              :key="item.weizhi.y"
              id="mianspan"
              style="pointer-events: none;"
              :style="{
                width: 35 * 0.6 * num + 'px',
                height: 35 * 0.6 * num + 'px',
                lineHeight: 40 * 0.6 * num + 'px',
                fontSize: 40 * 0.6 * num + 'px',
                top:
                  (height-(item.start_point.y / 10.0) / 5) * 0.6 * num + loctiontop +
                  'px',
                left:
                  ((item.start_point.x / 10.0) / 5) * 0.6 * num + loctionleft +
                  'px',
              }"
              >1</span
            >
          </template> -->

          <!-- ----------------------------------------------------------------终点圆点 -->
          <!-- <template v-if="list == ''">
            <span
              v-for="item in complete"
              :key="item.weizhi.age"
              id="mianspan"
              style="pointer-events: none;"
              :style="{
                width: 35 * 0.6 * num + 'px',
                height: 35 * 0.6 * num + 'px',
                lineHeight: 40 * 0.6 * num + 'px',
                fontSize: 40 * 0.6 * num + 'px',
                top:
                  (height-(item.target_point.y / 10.0) / 5) * 0.6 * num + loctiontop +
                  'px',
                left:
                  ((item.target_point.x / 10.0) / 5) * 0.6 * num + loctionleft+
                  'px',
              }"
              >2</span
            >
          </template> -->



          <!-- -------------------------库位点标记小圆点       正确的转换------------------------------- -->
          <template v-if="list != ''">
            <span
              v-if="list.type != 3"
              id="span"
              class="active"
              :style="{
                width: 20*0.6 * num + 'px',
                lineHeight: 20 * 0.6 * num+ 'px',
                fontSize: 16 * 0.6 * num + 'px',
                height: 20*0.6 * num + 'px',
                top: (height-(list.y / 10.0) / 5) * 0.6 * num-(20* 0.6 * num/2) + loctiontop + 'px',
                left: (((list.x / 10.0) / 5)) * 0.6 * num-(20* 0.6 * num/2) + loctionleft + 'px',
              }"
              >{{ list.id }}</span
            >

            <!--充电点图片 -->
            <div
              v-if="list.type == 3"
              class="imgactive"
              @click="select(list)" 
              :style="{
                width: 20 * num *0.6 + 'px',
                height: 20 * num  *0.6+ 'px',
                top: (height-(list.y / 10.0) / 5) * 0.6 * num-(24* 0.6 * num/2) + loctiontop + 'px',
                left: (((list.x / 10.0) / 5)) * 0.6 * num-(24* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + list.fused_angle * 180 / Math.PI + 'deg)',
              }"
            >
              <!-- <img
                v-if="list.type == 3"
                @click="select(list)" 
                id="bycar"
                src="../../../assets/充电车.png"
                alt=""
                :style="{
                  width: 15 * num *0.6+ 'px',
                  height: 30 * num*0.6 + 'px',
                  top: (height-(list.y / 10.0) / 5) * 0.6 * num + loctiontop +
                'px',
              left: (((list.x / 10.0) / 5)) * 0.6 * num + loctionleft + 'px',
                  transform: 'rotate(' + list.fused_angle + 'deg)',
                }"
              /> -->
            </div>
          </template>

          <!-- </template> -->
          <!-- 显示路线编辑点位 -->
        <!--平移按钮 -->
        <van-button @click="right" class="right"
          ><van-icon name="arrow" size="44"
        /></van-button>
        <van-button @click="left" class="left"
          ><van-icon name="arrow-left" size="44"
        /></van-button>
        <van-button @click="top" class="top"
          ><van-icon name="arrow-up" size="44"
        /></van-button>
        <van-button @click="bottom" class="bottom"
          ><van-icon name="arrow-down" size="44"
        /></van-button>

        <!-- --------------------------------------------------------------按钮放大缩小区域 -->
        <div class="mybig">
          <van-button type="info" @click="big"
            ><i class="iconfont icon-sousuofangda" style="fontsize: 28px"></i
          ></van-button>
          <van-button type="info" @click="min"
            ><i class="iconfont icon-suoxiao" style="fontsize: 28px"></i
          ></van-button>
        </div>
        <!-- --------------------------------------------------------------按钮放大缩小区域 -->
      </div>

      <!-- -------------------------------------------------库位属性内容---------------------------------------------- -->
      <div class="property" v-if="newproperty">
        <!-- 删除库位按钮 -->
        <div class="mybutton">
          <!-- <van-button id="youbutton" @click.stop="record">记录库位</van-button>
          <van-button @click="remove(list.id)">删除库位</van-button> -->
          <!-- <van-button @click="amend(list)">编辑库位</van-button> -->
        </div>
        <div class="zore">库位信息</div>
        <div class="beiji">
          <div class="middle" v-if="list != ''">
            <div class="one">
              <span>库位ID:</span
              ><span v-if="list != 0" style="color: #fff;">
                {{ list.id }}</span
              >
            </div>
            <div class="three"><span>库位坐标:</span></div>
          </div>
          <div class="four" v-if="list != ''">
            <div class="x">
              <!--x轴区域  @focus="addX" -->
              <!-- <van-field
                label-width="80"
                
                v-model="list.x"
                label="x轴:"
                placeholder="请输入x轴坐标"
                :rules="rules.x"
                :value="inif.x"
              /> -->
              <span>X轴:</span>
              <keyboardss :inputValue="list.x" @keyList="ListX"></keyboardss>
            </div>
            <div class="y">
              <!-- y轴区域 @focus="addY" -->
              <!-- <van-field
                label-width="80"
                
                v-model="list.y"
                label="y轴:"
                placeholder="请输入y轴坐标"
                :rules="rules.y"
                :value="inif.y"
              /> -->
              <span>Y轴:</span>
              <keyboardss :inputValue="list.y" @keyList="ListY"></keyboardss>
            </div>
            <div class="mission" v-if="list.type != 3">
              <!-- <h5>任务点位选择</h5> -->
              <van-radio-group v-model="newradio" direction="horizontal">
                <van-radio
                  :name="index"
                  v-for="(item, index) in Multiple"
                  :key="index"
                  @click="addMultiple(index)"
                  >{{ item }}</van-radio
                >
              </van-radio-group>
            </div>
            <!-- <div v-if="list.type == 3">
              <van-button round block type="info" @click="onSubmitss"
                >充电任务</van-button>
            </div> -->
            <div style="margin: 16px" class="newbutton">
              <van-button round block type="info" @click="onSubmit"
                >保存</van-button
              >
              <van-button round block type="info" @click="onClickLeft"
                >取消</van-button
              >
            </div>
          </div>
        </div>
      </div>

      <!--点击图片上的库位点 -->
      <div class="property" v-if="!newproperty">
        <!-- 删除库位按钮 -->
        <div class="mybutton"></div>
        <div class="zore">库位信息</div>
        <div class="beiji">
          <div class="middle" v-if="activeItem != ''">
            <div class="one">
              <span>库位ID:</span
              ><span
                v-if="activeItem != 0"
                style="color: #fff; marginleft: 30px"
              >
                {{ activeItem.id }}</span
              >
            </div>
            <div class="three"><span>库位坐标:</span></div>
          </div>
          <div class="four" v-if="activeItem != ''">
            <div class="x">
              <!--x轴区域  @focus="addX" -->
              <!-- <van-field
                label-width="80"
                
                v-model="list.x"
                label="x轴:"
                placeholder="请输入x轴坐标"
                :rules="rules.x"
                :value="inif.x"
              /> -->
              <span>X轴:</span>
              <keyboardss
                :inputValue="activeItem.x"
                @keyList="ListX"
              ></keyboardss>
            </div>
            <div class="y">
              <!-- y轴区域 @focus="addY" -->
              <!-- <van-field
                label-width="80"
                
                v-model="list.y"
                label="y轴:"
                placeholder="请输入y轴坐标"
                :rules="rules.y"
                :value="inif.y"
              /> -->
              <span>Y轴:</span>
              <keyboardss
                :inputValue="activeItem.y"
                @keyList="ListY"
              ></keyboardss>
            </div>
            <div class="mission">
              <!-- <h5>任务点位选择</h5> -->
              <van-radio-group v-model="newradio" direction="horizontal">
                <van-radio
                  :name="index"
                  v-for="(item, index) in Multiple"
                  :key="index"
                  @click="addMultiple(index)"
                  >{{ item }}</van-radio
                >
              </van-radio-group>
            </div>
            <div style="margin: 16px" class="newbutton">
              <van-button round block type="info" @click="onSubmit" :loading="dingShow"
                >保存</van-button
              >
              <van-button round block type="info" @click="onClickLeft"
                >取消</van-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import Cookies from 'js-cookie'
import { Dialog } from "vant";
//导入封装好的路线编辑数据接口
import { geteditorsApi } from "@/api/editors";
//导入封装好的数据接口
import { recordApi, removeApi, updataApi, gainApi } from "@/api/record";
//导入封装好的列列表数据接口
import { addparseApi, deteleparseApi, changedApi } from "@/api/location";
// 导入yaml格式进行获取到数据的转换
import yaml from "js-yaml";
export default {
  // 接收父组件传过来的值
  props: ["isShow", "list", "robot", "parse", "xshow", "yshow", "radio"],
  //声明保存数据的data
  data() {
    return {
      dingShow: false, //加载动画的显示和隐藏
      newproperty: true,
      newradio: null, //定义一个数据用来保存父组件中的值
      loctiontop: 0, //右边偏移变量
      loctionleft: 0, //左边便宜变量
      activeItem: "", //选中之后高亮的类名
      // threeactive:false, //点击库位点高亮
      rowshow: false, //控制列列表键盘显示隐藏
      // xshow: false, //x轴键盘显示和隐藏
      // yshow: false, //y轴键盘显示和隐藏
      complete: [], //保存路线编辑数据
      keymnId: false,
      num:0.5,
      keysshow: false,
      keyshow: false, //控制键盘的显示和隐藏
      Listitem: "", //用来保存点击列列表单的那一项数据
      listID: false, //控制表单的禁用与显示
      isID: false, //用来控制表单的禁用和不禁用
      id: "", //点击修改的id用做三元判断
      forbid: "禁止叉臂起降", //禁止叉臂起降
      shutoff: "关闭后避障", //关闭后避障
      closed: "关闭前避障", //关闭前避障
      queen: 0, //关闭后避障
      front: 0, //关闭前避障
      take: 0, //禁止叉臂起降
      newindex: "", //用来保存单选的下标
      Multiple: ["待命点","任务点", "视觉点", ], //单选的数组
      formKey: 0, //用来清空表单验证
      result: [], //列列表多选的数组
      myimage: "", //定义一个保存base64格式的图片变量
      formShow: false, //控制表单的显示与隐藏
      columnShow: false, //列列表的显示与隐藏
      location: [], //列列表包含的库位列表数组
      newItem: "", //保存点击的那一项数据
      width: "",
      height: "",
      newx: "",
      newy: "",
      //列列表信息
      inif: {
        columnId: null, //id
        seatId: "", //库位id
        speed: "", //最大速度
        x: "", //获取x轴坐标
        y: "", //获取y轴坐标
        fused_angle: "", //车辆角度
      },
      // 进行输入的正则验证
      rules: {
        columnId: [
          { required: true },
          { pattern: /^[1-9]\d*/, message: "请输入正确的id" },
        ],
        seatId: [
          { required: true },
          { pattern: /^[1-9]\d*/, message: "请输入正确的id" },
        ],
        speed: [
          { required: true },
          { pattern: /^[0-9]+$/, message: "请输入纯数字" },
        ],
        x: [{ required: true }],
        y: [{ required: true }],
      },
    };
  },
  created() {
    this.geteditors(); //获取路线编辑数据
    this.gain(); //页面一打开就获取地图
  },
  watch: {
    list(one, two) {
      console.log(one, two);
      // this.newradio = one;
    },
    radio(one, two) {
      // console.log(one, two);
      this.newradio = one;
    },
    deep: true, //开启深度侦听
    immediate: true, // watch侦听操作内的函数会立刻被执行
  },
  //  鼠标移动图片
  // mounted() {
  //   var div = document.getElementById("myone");
  //   div.addEventListener("touchstart", function (e) {
  //     var x = e.targetTouches[0].pageX - e.currentTarget.offsetLeft + 250;
  //     var y = e.targetTouches[0].pageY - e.currentTarget.offsetTop + 50;
  //     document.addEventListener("touchmove", move);
  //     function move(e) {
  //       div.style.left = e.targetTouches[0].pageX - x + "px";
  //       div.style.top = e.targetTouches[0].pageY - y + "px";
  //     }
  //     document.addEventListener("touchend", function () {
  //       document.removeEventListener("touchmove", move);
  //     });
  //   });
  // },

  //注册局部组件指令
  // directives: {
  //   drag: function (el) {
  //     let dragBox = el;
  //     dragBox.onmousedown = (e) => {
  //       //算出鼠标相对元素的位置
  //       let disX = e.clientX - dragBox.offsetLeft;
  //       let disY = e.clientY - dragBox.offsetTop;
  //       console.log(disX, disY);
  //       document.onmousemove = (e) => {
  //         //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
  //         //这个 170 是我元素宽的一半
  //         let left = e.clientX - disX;
  //         let top = e.clientY - disY;
  //         //移动当前元素
  //         dragBox.style.left = left + "px";
  //         dragBox.style.top = top + "px";
  //         console.log(left, top);
  //       };
  //       document.onmouseup = (e) => {
  //         //鼠标弹起来的时候不再移动
  //         document.onmousemove = null;
  //         //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
  //         document.onmouseup = null;
  //       };
  //     };
  //   },
  // },
  mounted() {
    let numss = Cookies.get('nums');
    let loctiontopss = Cookies.get('loctiontops');
    let loctionleftss = Cookies.get('loctionlefts');
    if(numss == undefined){
    }else{
      this.num = Number(numss);
    }
    if(loctiontopss == undefined){
    }else{
      this.loctiontop = Number(loctiontopss);
    }
    if(loctionleftss == undefined){
    }else{
      this.loctionleft = Number(loctionleftss);
    }
  },
  // 声明事件
  methods: {
    ListX(val) {
      this.list.x = Number(val);
    },
    ListY(val) {
      this.list.y = Number(val);
    },

    //x输入框获得焦点事件
    addX() {
      this.$emit("newxShow", true);
    },
    //y轴输入框获得焦点事件
    addY() {
      this.$emit("newyShow", true);
    },

    //图片上的库位点点击事件
    select(item) {
      console.log(item)
      this.activeItem = item;
      this.newproperty = false;
      this.$emit("activesdianwei", item);
      console.log(this.activeItem, "点击后的数据");
    },

    //图片右边便宜
    right() {
      this.loctionleft += 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    left() {
      this.loctionleft -= 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    top() {
      this.loctiontop -= 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    bottom() {
      this.loctiontop += 30;
      Cookies.set('loctiontops', this.loctiontop);
    },

    //列列表单键盘输入的值
    rowChange(input) {
      this.inif.columnId = input;
    },
    //库位id的输入
    onChange(input) {
      // input 是当前点击按钮的值
      this.inif.seatId = input; //把点击的那一项的值赋值给输入框
    },
    //  速度的输入
    Change(input) {
      // input 是当前点击按钮的值
      // this.inif.speed = input; //把点击的那一项的值赋值给输入框
      if (this.keysshow == true) {
        //判断kesshow等于true就是速度的键盘
        this.inif.speed = input;
      } else if (this.xshow == true) {
        //xshow为true就是x轴的键盘
        this.list.x = input;
      } else {
        this.list.y = input;
      }
    },
    //键盘的删除和确定事件
    onKeyPress(button) {
      if (button == "{enter}") {
        // 如果按确认键的相应操作
        this.keyshow = false;
        this.keysshow = false;
        this.yshow = false;
        this.rowshow = false;
        this.xshow = false;
      }
      if (button == "{bksp}") {
        // 删除键的相应操作
      }
    },

    //获取路线编辑数据
    async geteditors() {
      let res = await geteditorsApi(); //发送请求获取数据
      // console.log(res)
      // console.log(this.complete, "路线"); //路线编辑数据
      if (res.data.msg != "successed") {
        this.complete = yaml.load(res.data); //定义一个新的变量
        // console.log(this.complete);
      }
    },

    //放大图片按钮
    big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },

    //---------------------------------用来获取图片数据的方法
    gain() {
        let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取本地服务器上的端口号
      //      let ws = new WebSocket("ws://192.168.20.101:10009");
      ws.onmessage = (e) => {
        //使用箭头函数改变this的指向
        //当服务器有消息，就会自动调用这个函数
        //e.data有服务器返回的数据
        const res = yaml.load(e.data); //使用yaml格式进行转换
        if (res.uri == "/sirius/topics/slam_grid_map") {
          //判断res中的uri路劲是不是等于有图片的路径
          this.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
          this.width = res.info.width; //保存宽度
          this.height = res.info.height; //保存高度
          this.newx = res.info.origin.position.x;
          this.newy = res.info.origin.position.y;
          // console.log(this.newx,'圆点x轴',this.newy,'圆点y轴');
        } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
          this.inif.x = res.fused_x; //保存获取到的x轴坐标
          this.inif.y = res.fused_y; //保存获取到的y轴坐标
          this.inif.fused_angle = res.fused_angle;
          // console.log(this.inif.x, this.inif.y, "坐标");
        }
      };
    },
    //--------------------------------------------------------------------------------------------------库位区域
    //-------------------------------点击记录后保存当前点击的这一项数据
    record() {
      // 点击记录按钮把form表单的状态改成显示
      // this.formShow = true;
      // 把二级路由导航栏的状态改为false隐藏
      this.$store.commit("changShow", false);
      this.isID = false;
    },
    //单选的点击事件
    addMultiple(index) {
      //保存用户点击的那一项下标
      console.log(index)
      this.index = index;
      this.newradio = index;
      this.list.type = index;
      // console.log(index,'点击的下标');
      this.$emit("changRadio", this.newradio);
      // console.log(this.index,'选中的');
    },
    //----------------------------------点击库位列表保存按钮发送请求进行编辑
    async onSubmitss() {
      console.log(this.list)
      this.dingShow = true; //把加载动画改为显示
      setTimeout(async () => {
        try {
          //设置计时器
          let res = await issueApi({
            back_standby_point: 0, //是否返回待命点
            task_type: 2, //任务类型为父组件传过来的下标
            start_point_id: 0, //起点点id位置
            end_point_id: this.list.id, //终点id位置
            start_column_id: 0, //列起点id
            end_column_id: 0, //列终点id
          });
          this.$toast.success("执行成功"); //提示用户
        } catch {
          this.$toast.fail("执行失败");
        }
        this.dingShow = false; //把加载状态改为隐藏
        //清空数据
          this.value1=''
      }, 1500);
    },
    async onSubmit() {
     try {
        console.log(this.index)
        console.log(this.list)
        //----------------------------------发送请求修改的接口请求
        let res = await updataApi({
          id: this.list.id, //传入id
          type:this.list.type, //传入单选的类型
          x: this.list.x,
          y: this.list.y,
          angle: this.list.angle,
        });
        // //提示用户新建成功
        this.$toast.success("编辑成功");
        //生成自定义事件修改父组件中的值
        this.$emit("newxShow", false);
        //调用父组件中的方法刷新页面
        this.$parent.gain();
      } catch {
        this.$toast.fail("编辑失败");
      }



      // this.formShow = false; //修改成功后关闭表单
      // //点击提交完数据后把form表单的状态改为false
      // this.$emit("hideShow", false);
      // // //把二级路由导航栏的状态改为true
      // this.$store.commit("changShow", true);
      // //提交完成后把表单数据清空
      // this.inif.seatId = "";
      // this.inif.speed = "";
      // 提交后把开关都改为默认值
      // this.queen = false;
      // this.front = false;
      // this.take = false;
      //把单选也清空
      // this.radio = [];
      // //清除id
      // this.id = "";
    },
    //---------------------------------点击取消关闭键盘
    onClickLeft() {
      //生成自定义事件修改父组件中的值
      this.$emit("newxShow", false);
      // this.$emit("hideShow", false);  //自定义事件把表单关闭
      // this.formShow = false; //把表单改为隐藏
      // this.keysshow = false; //关闭键盘
      // this.keyshow = false; //关闭键盘
      // this.xshow = false; //关闭键盘
      // this.yshow = false; //关闭键盘
      // this.formShow = false; //把表单改为隐藏
      // this.$store.commit("changShow", true); //修改二级路由的显示与隐藏
      // this.inif.seatId = ""; //清除输入框内容id
      // this.inif.speed = ""; //清除最大速度值
      //清空正则验证
      // this.formKey++;
      // 退出后把开关都改为默认值
      // this.queen = false;
      // this.front = false;
      // this.take = false;
      //把单选也清空
      // this.radio = [];
    },
    // -----------------------------------点击修改触发的事件
    amend(item) {
      if (item == "") {
        this.$toast.fail("请选择你修改的那一项");
        return;
      }
      this.newItem = item;
      console.log(item);
      this.isID = true;
      // this.$emit("overShow", true);  //自定义事件把表单关闭
      this.formShow = true; //把编辑表单改为true
      this.id = item.id; //把点击的这一项的id进行赋值
      this.$store.commit("changShow", false); // 把二级路由导航栏的状态改为false隐藏
      this.inif.seatId = String(item.id); //赋值id
      // this.inif.speed = String(item.vel_max); //赋值速度
      this.inif.x = item.x;
      this.inif.y = item.y;
    },

    //----------------------------------删除库位的方法
    // remove(id) {
    //   if (id == undefined) {
    //     this.$toast.fail("请选择你要删除的那一项");
    //     return;
    //   } else {
    //     Dialog.confirm({
    //       title: "删除",
    //       message: `您确定要删除名称为${id}的库位吗？`,
    //     })
    //       // 点击确认发送请求
    //       .then(async () => {
    //         //发送删除库位的接口请求
    //         let res = await removeApi({
    //           id: id,
    //         });
    //         // 提示用户
    //         this.$toast.success("删除成功");
    //         //声明事件调用父组件中的方法
    //         this.$emit("gain");
    //         //声明自定义事件传入父组件
    //         this.$emit("onlist", "");
    //       })
    //       // 点击取消触发
    //       .catch(() => {
    //         // 提示用户
    //         this.$toast.fail("取消成功");
    //       });
    //   }
    // },

    //--------------------------------------------------------------------------------------------------新建组合列区域
    column() {
      this.listID = false; //关闭输入框的禁用
      this.columnShow = true;
      //把二级路由导航栏的状态改为false隐藏
      this.$store.commit("changShow", false);
    },
    //--------------------------------点击列列表单导航栏左侧关闭表单
    twoClickLeft() {
      // this.$emit("hideShow", false);  //自定义事件把表单关闭
      this.rowshow = false; //隐藏键盘
      this.columnShow = false; //把表单状态改为隐藏
      this.$store.commit("changShow", true); //把二级路由导航改为显示
      // 清空输入框
      this.inif.columnId = "";
      //清空正则验证
      this.formKey++;
      //清除选中库位的标记
      this.result = [];
      // 判断点击复选框等于0时
      if (this.result.length == 0) {
        //就把包含库列表的数据删除最后一项
        this.location.pop();
      }
    },
    //--------------------------------新建组合列点击提交
    async twoSubmit() {
      //判断没有id就是为新建就得筛选重复的id
      if (!this.listID) {
        // 使用数组中的findIndx方法进行遍历判断数组的id和名称是不是等于我输入的id和名称
        let index = this.parse.filter((item) => {
          return item.point_list_id == this.inif.columnId;
        });
        //如果返回值是不等于空的就代表id重复
        if (index != "") {
          // 提示用户
          this.$toast.fail("id重复!!!");
          // 直接retur结束后面的操作
          return;
        }
      }
      // 判断双向绑定的数组长度等于0
      if (this.result.length == 0) {
        //提示用户还没有选择库位
        this.$toast.fail("请选择库位");
        // 结束后面的代码
        return;
      }
      // 进行判断id不能大于10000
      if (this.inif.columnId >= 10000) {
        this.$toast.fail("id最大不能超过10000!"); //提示用户
        return; //直接return不执行后面的代码
      }

      // 判断是新增还是修改的请求
      if (this.listID == false) {
        //发送新增的请求
        let res = await addparseApi({
          point_list_id: this.inif.columnId, //传入参数id
          point_id: [...this.location], //把点击的库列表数据进行展开
        });
      } else {
        // 发送修改的请求
        let res = await changedApi({
          //传入保存的点击那一项的id
          point_list_id: this.Listitem.point_list_id,
          //传入你点击的这一项的数据进行展开
          point_id: [...this.location],
        });
        this.$set(this.list, "point_id", this.location);
      }
      // 提示用户新建成功
      this.$toast.success(this.listID ? "修改成功" : "新增成功");
      this.columnShow = false; //把表单状态改为隐藏
      this.$emit("getparse"); //声明一个事件用来调用父组件中刷新页面获取数据的方法
      // 清空输入框
      this.inif.columnId = "";
      // 把二级路由的状态改为显示
      this.$store.commit("changShow", true);
      //把选择框的状态，也就是把result数组赋值为空
      this.result = [];
    },
    //--------------------------------新建组合列表复选框的点击事件
    add() {
      this.location = this.result;
    },

    // 修改列列表按钮事件
    async change() {
      // this.columnShow = true; //把列列表单改为true显示
      // this.inif.columnId = item.point_list_id; //把点击的这一项的id赋值给输入框
      // this.listID = true; //把禁用改为不禁用
      // this.Listitem = item; //把点击的那一项数据保存起来
      // this.$store.commit("changShow", false); //把二级路路由改为隐藏
    },
    //----------------------------------删除列类表按钮事件
    detele(id) {
      // 弹出确认框
      Dialog.confirm({
        title: "删除列列表",
        message: `你确定要删除ID为${this.list.point_list_id}的列表嘛?`,
      })
        //点击确定执行
        .then(async () => {
          //发送请求
          let res = await deteleparseApi({
            point_list_id: id, //传入删除的id
          });
          // 提示用户
          this.$toast.success("删除成功");
          //声明一个事件用来调用父组件中刷新页面获取数据的方法
          this.$emit("getparse");
          //声明自定义事件传入父组件
          this.$emit("onlist", "");
        })
        // 点击取消
        .catch(() => {
          // 提示用户
          this.$toast.fail("取消成功!");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.boxList {
  width: 100%;
  height: 100%;
  .List {
    width: 100%;
    display: flex;
    height: 100%;
    /deep/.van-icon-success::before{
  //display: none;
  text-indent:-62px;
}
    .myimg {
      margin-left: 40px;
      position: relative;
      text-align: center;
      border: 2px solid black;
      overflow: hidden;
      width: 955px !important;
      height: 400px;
      display: flex;
      .right {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        position: absolute;
        top: 40%;
        right: 38%;
        color: #1ac1c1;
        z-index: 1000;
        border: none;
      }
      .left {
        position: absolute;
        top: 40%;
        left: -35px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
        border: none;
        z-index: 1000;
      }
      .top {
        position: absolute;
        top: -35px;
        right: 64%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;

        z-index: 1000;
        border: none;
      }
      .bottom {
        position: absolute;
        bottom: -35px;
        right: 64%;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
        color: #1ac1c1;
        z-index: 1000;
        border: none;
      }
      ::v-deep .van-image__img {
        width: auto !important;
      }
      #myone {
        position: relative;
        cursor: move;
      }

      #youbutton {
        font-size: 20px;
        width: 120px;
        height: 35px;
        border-radius: 12px;
        background-color: #ffc000;
        position: absolute;
        top: 15px;
        left: 25px;
        text-align: center;
      }
      #mybutton {
        font-size: 20px;
        position: absolute;
        top: 40px;
        left: 25px;
        width: 140px;
        text-align: center;
        background-color: #ffc000;
        border-radius: 12px;
      }
    }
    .property {
      position: fixed;
      z-index: 3000;
      top: 65px;
      right: 0;
      height: 1000px;
      text-align: left;
      line-height: 45px;
      width: 220px;
      background-color: #12151a;
      .mybutton {
        text-align: center;
        .van-button {
          color: #fff;
          font-size: 22px;
          border-radius: 12px;
          width: 170px;
          background-color: #1a1c25;
          border: none !important;
          margin-top: 15px;
        }
      }
      .beiji {
        color: #5f5f61;
        height: 100%;
        background-color: #181a23;
      }
      .zore {
        font-size: 24px;
        color: white;
        margin-top: 50px;
        background-color: #212430;
        border-radius: 14px 14px 0 0;
        text-align: center;
      }
      .middle {
        color: #dbdbdb;
        font-size: 20px;
        text-indent: 1em;
      }
      .four {
        font-size: 20px;
        text-indent: 2em;
        .i {
          margin: 0 10px;
        }
      }
      .twofour {
        border: 2px solid black;
        text-indent: 1em;
        height: 240px;
        overflow-x: hidden;
        overflow-y: auto;
        div {
          font-size: 20px;
        }
        .twofour::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
  // .van-popup {
  //   position: fixed;
  //   top: 350px;
  //   // margin-bottom: 2000px;
  //   margin-left: 300px;
  //   width: 330px;
  //   height: 340px;
  //   // border: 2px solid black;
  //   overflow-x: hidden;
  // }

  .van-form {
    .van-field {
      width: 250px !important;
    }
    .van-cell {
      // margin-left: 20px !important;
    }
  }
}
::v-deep input {
  color: #fff !important;
}
::v-deep.van-field__control {
  width: 300px !important;
  color: #fff !important;
}
.boxList .van-form .van-field[data-v-40d3e1c4] {
  width: 330px !important;
  color: #fff !important;
}
.select {
  height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 40px;

  .select::-webkit-scrollbar {
    display: none;
  }
  .van-checkbox {
    margin-bottom: 15px;
  }
}
h5 {
  text-indent: 2em;
}
.mission {
  width: 160px;
  margin-top: 20px;
  height: 150px;
  // border-bottom: 2px solid black;
  // border-top: 2px solid black;
  .van-radio-group {
    font-size: 20px;
    height: 140px;
    margin-left: 25px;
    width: 200px;
  }
  ::v-deep .van-radio__label {
    margin-left: 8px;
    color: #fff;
    line-height: 20px;
  }
}
::v-deep.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 0px !important;
  overflow: hidden;
  color: #fff !important;
  font-size: 18px;
  line-height: 24px;
  background-color: #181a23 !important;
}
::v-deep.van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #fff !important;
  line-height: inherit;
  text-align: left;
  background-color: transparent;
  border: 0;
  resize: none;
}
.bool {
  height: 180px;
  border-bottom: 2px solid black;
  .van-cell--center {
    width: 500px !important;
    text-align: center;
  }
  .van-cell__title {
    width: 200px !important;
  }
}

#mianspan {
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  background-color: #00d1d1;
  position: absolute;
}
#myspan {
  width: 35px;
  height: 35px;
  border: 2px solid #00d1d1;
  border-radius: 20px;
  position: absolute;
  top: 200px;
  left: 100px;
  color: rgb(10, 0, 1);
  background-color: #ddd9;
  font-weight: 900;
}

// 库位点样式
#span {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  width: 22px;
  height: 22px;
  position: absolute;
  background-color: #feed9d;
  border: 2px solid #cdc6a6;
  line-height: 22px;
  &.active {
    background-color: #46eefb;
  }
  &.twoactive {
    background-color: #46eefb;
    border: 2px solid #78b6fa;
  }
}
#bycar {
  width: 25px;
  height: 25px;
  position: absolute;
  z-index: 100;
}
.Gray {
  width: 22px;
  height: 22px;
  position: absolute;
  background-color: #feed9d;
  border: 2px solid #cfc598;
}
.newbutton {
  display: flex;
  .van-button {
    border: 2px solid #1989fa;
    margin: 0 auto;
    width: 100px !important;
    margin: 5px;
    background-color: #161920;
    font-weight: 700;
  }
}
.mybig {
  position: fixed;
  bottom: 30px;
  right: 240px;
  .van-button {
    margin-left: 20px;
  }
}
.imgactive {
  position: absolute;
  border-radius: 5px;
  border: 2px solid #ff0000;
}

::v-deep.keyboard_pop {
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;
  background: #fff;
  box-shadow: 0 -3px 8px 5px #ddd;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  // padding: 50px 75px;
  width: 500px !important;
}
.y {
  display: flex;
  span {
    font-size: 20px;
    color: #dbdbdb;
    text-indent: 1.5em;
  }
}
.x {
  display: flex;
  span {
    color: #dbdbdb;
    font-size: 20px;
    text-indent: 1.5em;
  }
}
.myspanID{position: absolute;
  color: rgb(10, 0, 1);
  font-weight: 900;
}
</style>
